<template>
  <div class="editor-demo-container">
    <a-card title="富文本编辑器使用示例" class="mb-4">
      <a-tabs v-model="activeTab" type="card">
        <!-- TinyMCE 编辑器 -->
        <a-tab-pane key="tinymce" tab="TinyMCE 编辑器">
          <div class="editor-section">
            <h3>TinyMCE 富文本编辑器</h3>
            <p class="text-gray-600 mb-4">功能强大的现代化富文本编辑器，支持丰富的插件和自定义配置。</p>
            
            <TinyMce v-model="tinymceContent" />
            
            <div class="mt-4">
              <h4>编辑器内容预览：</h4>
              <div class="content-preview" v-html="tinymceContent"></div>
            </div>
            
            <div class="mt-4">
              <a-button @click="getTinymceContent" type="primary">获取内容</a-button>
              <a-button @click="setTinymceContent" class="ml-2">设置内容</a-button>
              <a-button @click="clearTinymceContent" class="ml-2">清空内容</a-button>
            </div>
          </div>
        </a-tab-pane>
        
        <!-- UEditor 编辑器 -->
        <a-tab-pane key="ueditor" tab="UEditor 编辑器">
          <div class="editor-section">
            <h3>UEditor 富文本编辑器</h3>
            <p class="text-gray-600 mb-4">百度开源的富文本编辑器，功能全面，适合中文环境使用。</p>
            
            <div class="mb-4">
              <label class="block text-sm font-medium mb-2">编辑器宽度:</label>
              <a-radio-group v-model="ueditorWidth" @change="onUEditorWidthChange">
                <a-radio-button value="100%">100%</a-radio-button>
                <a-radio-button value="600px">600px</a-radio-button>
                <a-radio-button value="400px">400px</a-radio-button>
              </a-radio-group>
            </div>
            <UEditor 
              v-model="ueditorContent" 
              :width="ueditorWidth"
              :height="400"
              placeholder="请输入内容..."
              @ready="onUEditorReady"
              @change="onUEditorChange"
            />
            
            <div class="mt-4">
              <h4>编辑器内容预览：</h4>
              <div class="content-preview" v-html="ueditorContent"></div>
            </div>
            
            <div class="mt-4">
              <a-button @click="getUEditorContent" type="primary">获取内容</a-button>
              <a-button @click="setUEditorContent" class="ml-2">设置内容</a-button>
              <a-button @click="clearUEditorContent" class="ml-2">清空内容</a-button>
            </div>
          </div>
        </a-tab-pane>
        
        <!-- 使用说明 -->
        <a-tab-pane key="usage" tab="使用说明">
          <div class="usage-section">
            <h3>富文本编辑器使用说明</h3>
            
            <a-divider orientation="left">1. 组件导入</a-divider>
            <pre class="code-block"><code>// 导入单个组件
import TinyMce from '../../components/Editor/TinyMce.vue';
import UEditor from '../../components/Editor/UEditor.vue';

// 或者导入默认组件（TinyMce）
import Editor from '@/components/Editor';</code></pre>
            
            <a-divider orientation="left">2. TinyMCE 使用方式</a-divider>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;TinyMce v-model="content" /&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue';
import { TinyMce } from '@/components/Editor';

const content = ref('');
&lt;/script&gt;</code></pre>
            
            <a-divider orientation="left">3. UEditor 使用方式</a-divider>
            <pre class="code-block"><code>&lt;template&gt;
  &lt;UEditor 
    v-model="content" 
    :height="400"
    :width="800"
    placeholder="请输入内容..."
    @ready="onReady"
    @change="onChange"
  /&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue';
import { UEditor } from '@/components/Editor';

const content = ref('');

const onReady = (editor) => {
  console.log('编辑器准备就绪', editor);
};

const onChange = (value) => {
  console.log('内容变化', value);
};
&lt;/script&gt;</code></pre>
            
            <a-divider orientation="left">4. 组件属性说明</a-divider>
            <a-table :columns="propsColumns" :data-source="propsData" :pagination="false" size="small">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'type'">
                  <a-tag color="blue">{{ record.type }}</a-tag>
                </template>
                <template v-if="column.key === 'required'">
                  <a-tag :color="record.required ? 'red' : 'green'">
                    {{ record.required ? '是' : '否' }}
                  </a-tag>
                </template>
              </template>
            </a-table>
            
            <a-divider orientation="left">5. 注意事项</a-divider>
            <ul class="notice-list">
              <li>TinyMCE 需要网络加载相关资源文件，首次使用可能较慢</li>
              <li>UEditor 需要后端配置上传接口，默认接口为 <code>/api/ueditor/controller</code></li>
              <li>在弹窗中使用时，注意z-index层级问题</li>
              <li>建议根据实际需求选择合适的编辑器</li>
              <li>两个编辑器都支持自定义配置，可根据需要调整功能</li>
            </ul>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import TinyMce from '../../components/Editor/TinyMce.vue';
 import UEditor from '../../components/Editor/UEditor.vue';

// 当前激活的标签页
const activeTab = ref('tinymce');

// TinyMCE 内容
const tinymceContent = ref('<p>这是 TinyMCE 编辑器的初始内容</p>');

// UEditor 内容
const ueditorContent = ref('<p>这是 UEditor 编辑器的初始内容</p>');

// UEditor 宽度控制
const ueditorWidth = ref('100%');

// TinyMCE 操作方法
const getTinymceContent = () => {
  message.info(`TinyMCE 内容长度: ${tinymceContent.value.length} 字符`);
  console.log('TinyMCE 内容:', tinymceContent.value);
};

const setTinymceContent = () => {
  tinymceContent.value = '<h2>这是通过代码设置的内容</h2><p>包含<strong>粗体</strong>和<em>斜体</em>文本。</p>';
  message.success('TinyMCE 内容已设置');
};

const clearTinymceContent = () => {
  tinymceContent.value = '';
  message.success('TinyMCE 内容已清空');
};

// UEditor 操作方法
const getUEditorContent = () => {
  message.info(`UEditor 内容长度: ${ueditorContent.value.length} 字符`);
  console.log('UEditor 内容:', ueditorContent.value);
};

const setUEditorContent = () => {
  ueditorContent.value = '<h2>这是通过代码设置的内容</h2><p>包含<strong>粗体</strong>和<em>斜体</em>文本。</p>';
  message.success('UEditor 内容已设置');
};

const clearUEditorContent = () => {
  ueditorContent.value = '';
  message.success('UEditor 内容已清空');
};

// UEditor 事件处理
const onUEditorReady = (editor: any) => {
  console.log('UEditor 准备就绪:', editor);
  message.success('UEditor 编辑器已准备就绪');
};

const onUEditorChange = (value: string) => {
  console.log('UEditor 内容变化:', value);
};

// UEditor 宽度变化处理
const onUEditorWidthChange = () => {
  message.info(`UEditor 宽度已设置为: ${ueditorWidth.value}`);
};

// 属性说明表格数据
const propsColumns = [
  { title: '属性名', dataIndex: 'name', key: 'name' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '默认值', dataIndex: 'default', key: 'default' },
  { title: '必填', dataIndex: 'required', key: 'required' },
  { title: '说明', dataIndex: 'description', key: 'description' }
];

const propsData = [
  {
    key: '1',
    name: 'v-model',
    type: 'string',
    default: "''",
    required: false,
    description: '编辑器内容双向绑定'
  },
  {
    key: '2',
    name: 'height',
    type: 'number',
    default: '400',
    required: false,
    description: '编辑器高度（仅UEditor）'
  },
  {
    key: '3',
    name: 'width',
    type: 'number',
    default: '800',
    required: false,
    description: '编辑器宽度（仅UEditor）'
  },
  {
    key: '4',
    name: 'placeholder',
    type: 'string',
    default: "'请输入内容...'",
    required: false,
    description: '占位符文本'
  },
  {
    key: '5',
    name: 'readonly',
    type: 'boolean',
    default: 'false',
    required: false,
    description: '是否只读'
  },
  {
    key: '6',
    name: 'disabled',
    type: 'boolean',
    default: 'false',
    required: false,
    description: '是否禁用'
  },
  {
    key: '7',
    name: 'config',
    type: 'object',
    default: '{}',
    required: false,
    description: '编辑器自定义配置'
  }
];
</script>

<style scoped>
.editor-demo-container {
  padding: 20px;
}

.editor-section {
  padding: 20px 0;
}

.content-preview {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 12px;
  background-color: #fafafa;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}

.usage-section {
  padding: 20px 0;
}

.code-block {
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  margin: 10px 0;
  overflow-x: auto;
}

.code-block code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.45;
  color: #24292e;
}

.notice-list {
  padding-left: 20px;
}

.notice-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.notice-list code {
  background-color: #f1f3f4;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.ml-2 {
  margin-left: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}

.text-gray-600 {
  color: #6b7280;
}
</style>